/**
 * 拖拽列表
 * @param {Node} node 想要被拖拽的列表元素的父元素
 * @param {string} className 要被拖拽元素的类名(不要加.)
 * @param {function} ondrop 松开拖拽时触发的事件
 */
function draggable(node, className, dragend) {
    var draging = null;
  
    node.ondragstart = function(e) {
      // firefox设置了setData后元素才能拖动！！！！
      // 不能使用text，firefox会打开新tab
      e.dataTransfer.setData('te', e.target.innerText);
      draging = e.target.closest('.'+className);
    }
  
    node.ondragover = function(e) {
      e.preventDefault();
      var target = e.target;
  
      if (target.className.indexOf(className) < 0) target = target.closest('.ztItem');
  
      if (target && target !== draging) {
        var targetRect = target.getBoundingClientRect();
        var dragingRect = draging.getBoundingClientRect();
  
        if (target && target.animated) return;
  
        //_index是实现的获取index              
        if (_index(draging) < _index(target)) {
            target.parentNode.insertBefore(draging, target.nextSibling);
        } else {
            target.parentNode.insertBefore(draging, target);
        }
  
        _animate(dragingRect, draging);
        _animate(targetRect, target);
      }
    }
      
    // 不能用这个，这个仅在允许放置时才触发 
    // node.ondrop = ondrop;
    
    // 用这个，这个松开后就可以触发
    node.ondragend = dragend;
  
    //获取元素在父元素中的index
    function _index(el) {
      var index = 0;
  
      if (!el || !el.parentNode) return -1;
  
      while (el && (el = el.previousElementSibling)) {
        index++;
      }
  
      return index;
    }
  
    function _animate(prevRect, target) {
      var ms = 300;
  
      if (ms) {
        var currentRect = target.getBoundingClientRect();
  
        if (prevRect.nodeType === 1) {
          prevRect = prevRect.getBoundingClientRect();
        }
  
        _css(target, 'transition', 'none');
        _css(
          target,
          'transform',
          'translate3d(' +
            (prevRect.left - currentRect.left) +
            'px,' +
            (prevRect.top - currentRect.top) +
            'px,0)'
        );
  
        target.offsetWidth; // 触发重绘
        
        _css(target, 'transition', 'all ' + ms + 'ms');
        _css(target, 'transform', 'translate3d(0,0,0)');
  
        clearTimeout(target.animated);
        target.animated = setTimeout(function () {
          _css(target, 'transition', '');
          _css(target, 'transform', '');
          target.animated = false;
        }, ms);
      }
    }
  
    //给元素添加style
    function _css(el, prop, val) {
      var style = el && el.style;
  
      if (style) {
        if (val === void 0) {
          if (document.defaultView && document.defaultView.getComputedStyle) {
            val = document.defaultView.getComputedStyle(el, '');
          } else if (el.currentStyle) {
            val = el.currentStyle;
          }
  
          return prop === void 0 ? val : val[prop];
        } else {
          if (!(prop in style)) {
            prop = '-webkit-' + prop;
          }
  
          style[prop] = val + (typeof val === 'string' ? '' : 'px');
        }
      }
    }
}
  
// 调用
draggable(document.querySelector('.content .zt-lists'), 'ztItem', function(e) {
    console.log('停止拖拽了')
});

// 补充：需要由可拖拽元素的内部元素来控制
// 移动
$('.content').on('mousedown', '.set-sort .to-move', function() {
    $(this).closest('.zt-lists').find('.ztItem').attr('draggable', true); // 添加可移动属性
});
  
// 调用
draggable(document.querySelector('.content .zt-lists'), 'ztItem', function(e) {
    $('.content .zt-lists .ztItem').removeAttr('draggable'); // 移除可移动属性
});
